{% load static %}
<!DOCTYPE html>
<html lang="zh-CN" ng-app="share">

        <head>
                <meta charset='utf-8' />
                <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
                <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
                <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
                <script src="//cdn.bootcss.com/vue/2.1.10/vue.js"></script>

                <script>
                        ctx={{ctx | safe }}
                        $(function(){
                                new Vue({
                                        el:'#there',
                                        data:{
                                                slogan:ctx.slogan,
                                                content:ctx.content,
                                                foot:ctx.foot,
                                        }
                                })
                        })
                </script>

<style type="text/css" media="screen" id="test">
        body{
                min-width:700px;
        }
        #there .content{
                max-width: 1000px;
                margin: auto;
        }
        #head .content{
                max-width:1000px;
                margin: auto;
                position: relative;
        }
        #head{
                background-color: #eee;
        }
        #content{
                max-width:1000px;
                margin: auto;
                margin-top:30px;
        }
        .item{
                padding: 20px;;
        }
        .item-name{
                display: inline-block;
                vertical-align: top;
                width:15%;
                
                
        }
        .item-content{
                display: inline-block;
                vertical-align: top;
                width:75%;
                padding-left: 30px;
                border-left:1px solid #E4E4E4;
                min-height:100px;
        }
        #head .title-bar{
                color: white;
                background-color: #2004BF;
                padding: 5px 0px;
                /*overflow: hidden;*/
                position: relative;
        }
        /*#head .title-bar .menu{
                float: left;
        }*/
        #head .title-bar .user {
                /*float: right;*/
                position: absolute;
                top:5px;
                right:40px;
        }
        #head .title-bar a {
                color: white;
        }
        .head{
                max-width: 1200px;
                overflow: hidden;
                margin: auto;
        }
        .head .brand-img{
                float: left;
        }
        .menu{
                float: right;
                margin-right: 20%;
        }
        .menu li{
                list-style: none;
                float:left;
                height:30px;
                font-size:25px;

                padding: 20px 10px;
        }
        
        .menu .active{
                color: black;
        }
        .menu a{
                color: #e2e2e2;
        }
        .slogan{
                background-color: #009933;
                min-height:300px;
                padding: 50px;
        }
        .slogan .inn{
                max-width: 1000px;
                margin:auto;
                padding:20px 30px;
                color: white;
        }
        .foot{
                background-color: #009933;
                min-height: 30px;
                padding: 30px;
                color: white;
                margin-top: 50px;
        }
</style>

</head>
<body>
     <div id="there">
             <div class="head">
                     <div class="brand-img">
                             <img src="{% static 'image/enjoyst.png' %}" alt="">
                     </div>
                     <div class="menu">
                             <li class="active">小工具</li>
                             <li><a href="/blog">博客</a></li>
                     </div>
             </div>

             <div class="slogan">
                     <div class="inn">
                             <div v-html="slogan">

                             </div>
                     </div>
             </div>

             <div class="content">
                     <div v-html="content">

                     </div>
             </div>

             <div class="foot" v-html="foot">
                     2017-02-09
             </div>
     </div>



        <!--<div>-->
                <!--<div id='content'>-->

                        <!--<div class='item'>-->
                                <!--<div class='item-name'>-->
                                        <!--<h1><a href="/share">share:</a></h1>-->
                                <!--</div>-->
                                <!-- -->
                                <!--<div class='item-content'>-->
                                        <!--<p>平常您用什么记录知识？</p>-->
                                        <!--<p>evernote？</p>-->
                                        <!--<p>没有代码功能，作为码农，感觉不够用。</p>-->
                                        <!--<p>咯，这里是一个记录工具，具备记录代码，数学公式等等能力，是我随时记录灵感和知识的好工具。</p>-->
                                        <!--<p>功能不多，但是你可以试试。登陆后可以使用。</p>-->
                                        <!--<p><b>演示账号：demo 密码: demo</b></p>-->
                                <!--</div>-->
                        <!--</div>-->
                        <!--<hr>-->
                        <!--&lt;!&ndash;style='background-color: #F5F5F5;border: 1px solid #999;border-radius:5px;'&ndash;&gt;-->
                        <!--<div class='item' >-->
                                <!--<div class='item-name'>-->
                                        <!--<h1><a href="/talk">talk:</a></h1>-->
                                <!--</div>-->
                                <!-- -->
                                <!--<div class='item-content'>-->
                                        <!--<p>简单至极的浏览器聊天，websocket练习时做的。我们公司不能上qq和微信，所以这个能和朋友免费聊天。为了方便，就不用登陆了。</p>-->
                                <!--</div>-->
                        <!--</div>-->
                        <!--<hr>-->
                        <!--<div class='item'>-->
                                <!--<div class='item-name'>-->
                                        <!--<h3>pageBuilder&lt;!&ndash;<a href="/share">share:</a>&ndash;&gt;</h3>-->
                                <!--</div>-->
                                <!-- -->
                                <!--<div class='item-content'>-->
                                        <!--<p>移动页面制作工具</p>-->
                                        <!--<p>working ... </p>-->
                                <!--</div>-->
                        <!--</div>-->
                        <!--<hr>-->
                        <!--<div class='item'>-->
                                <!--<div class='item-name'>-->
                                        <!--<h3>workload&lt;!&ndash;<a href="/share">share:</a>&ndash;&gt;</h3>-->
                                <!--</div>-->
                                <!-- -->
                                <!--<div class='item-content'>-->
                                        <!--<p>员工工作量评估系统</p>-->
                                        <!--<p>working ... </p>-->
                                <!--</div>-->
                        <!--</div>-->
                        <!-- -->
                <!--</div>-->
        <!--</div>-->
        

        
        
        
        
        
</body>
</html>
